<template>
    <div id="app">
        <el-button @click="tankaung">自定义列</el-button>
        <custom-header ref="customDialog" :collapseInfo=collapseInfo @getTagInfo='getTagInfo'></custom-header>
    </div>
</template>

<script>
    import CustomHeader from './components/CustomHeader.vue'

    export default {
        name: 'app',
        components: {
            CustomHeader
        },
        data() {
            return {
                collapseInfo: [
                    {
                        name: '属性指标',
                        IsAllCheck: true,
                        checkAll: false,
                        isIndeterminate: true,//全选样式
                        checkedTarget: [],//传入必选项
                        targetList: [
                            {indexName: '时间'},
                            {indexName: '地点'},
                            {indexName: '人物'},
                            {indexName: '事件'},
                        ],
                        relation:[
                            {
                                father:'时间',
                                selectChildren:['地点','事件'],
                                disableChildren:['地点','人物','事件']
                            }
                        ]
                    },
                    {
                        name: '展示指标',
                        IsAllCheck: false,
                        checkedTarget: [],
                        targetList: [
                            {indexName: '哈哈'},
                            {indexName: '呵呵'},
                            {indexName: '嘻嘻'},
                            {indexName: '咯咯'},
                        ]
                    },
                ],
            }
        },
        methods: {
            tankaung() {
                this.$refs.customDialog.openDialog()
            },
            getTagInfo(val){
                console.log(val)
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
